<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>申述</title>
		<meta name="keywords" content="知果汇" />
		<meta name="description" content="知果汇" />
		<link rel="SHORTCUT ICON" href="_IMG_/favicon.ico" />
		<link rel="stylesheet" href="_CSS_/form.css" />
		<style type="text/css">
			html, body{width: 720px;}
			.text_area{width: 590px;}
			.commentsFill{width: 560px;height: 120px;}
			.upload_area{width: 615px;}
			.upload-list{float: left;display: inline-block;/*width: 590px;*/}
		    .upload-btn {width: 98px;height: 98px;margin: 0;border: 1px solid #e5e5e5;}
		    .upload-img{width:98px;height: 98px;position: relative;float: left;margin-right: 25px;margin-bottom: 16px;}
            .upload-btn img{display: block;width: 98px;height: 98px;}
			.upload-btn input{position: absolute;top: 0;margin: 0;width: 98px;height: 98px;border: none;opacity: 0; filter: alpha(opacity=0);cursor: pointer}			
			.upload-img p {width: 98px;font-size: 10px;line-height: 16px; margin-top: -35px;text-align: center;}
			.img-info img{width: 98px;height: 98px;}
			.file-panel {position: absolute;display: none;width: 98px;height: 98px;top: 0;overflow: hidden;z-index: 300;}
			.del_cancel {width: 98px;height: 98px;background-color: rgba( 0, 0, 0, 0.5 );}

			
		</style>
	</head>

	<body>
		<form id="form1" action="" method="post" class='forms'>
			<div class='form-group'>
				<label>订单编号：</label>
				<span class="number"></span>
			</div>
			<div class='form-group'>
				<label class="top">问题描述：</label>
				<div class="text_area">
					<textarea class="commentsFill" id="news_title" name="problem" maxlength="300" placeholder="请输入您的问题描述..." onkeyup="title_len();" onclick="title_len();"></textarea>
					<span id="titlelen">0/300</span>
				</div>
			</div>
			<div class='form-group'>
				<label class="top">证据上传：</label>
				<div class="upload_area">
					<div class="upload-list">
						<div class="upload-img">
							<div class="upload-btn">
								<img src="/static/web/images/upload1.png">
								<input type="file" name="upfile[]" id="file0" onchange="previewImage(this,0)" accept="image/gif, image/jpeg, image/png">
							</div>
						</div>
						<div class="upload-img">
							<div class="upload-btn">
								<img src="/static/web/images/upload1.png">
								<input type="file" name="upfile[]" id="file1" onchange="previewImage(this,1)" accept="image/gif, image/jpeg, image/png">
							</div>
						</div>
						<div class="upload-img">
							<div class="upload-btn">
								<img src="/static/web/images/upload1.png">
								<input type="file" name="upfile[]" id="file2" onchange="previewImage(this,2)" accept="image/gif, image/jpeg, image/png">
							</div>
						</div>
						<div class="upload-img">
							<div class="upload-btn">
								<img src="/static/web/images/upload1.png">
								<input type="file" name="upfile[]" id="file3" onchange="previewImage(this,3)" accept="image/gif, image/jpeg, image/png">
							</div>
						</div>
						<div class="upload-img mr0">
							<div class="upload-btn">
								<img src="/static/web/images/upload1.png">
								<input type="file" name="upfile[]" id="file4" onchange="previewImage(this,4)" accept="image/gif, image/jpeg, image/png">
							</div>
						</div>
					</div>
					<p>注：仅支持JPG,PNG,JPEG格式，为了能够更好更快地解决问题，请您上传与商家沟通的记录图片，每张图片带下不超过5Mb。</p>
				</div>
			</div>
			<div class='form-group'>
				<label>联系人：</label>
				<input class='form-control people' name="nick" type='text' />
			</div>
			<div class='form-group'>
				<label>手机号码：</label>
				<input class='form-control phone' name="phone" type='tel' />
			</div>
		</form>
	</body>
	<script src="_JS_/jquery-1.8.3.min.js"></script>
	<script src="_JS_/jquery.base64.js"></script>
	<script src="_JS_/jquery.cookie.js"></script>
	<script src="_JS_/common.js"></script>
	<script src="_P_/layer/layer.js"></script>
	<script type="text/javascript">
		//限制上传文件的类型和大小
		function previewImage(obj,num){
			var filepath=$(obj).val();
			fileObj = document.getElementById('file'+num);
			value = window.URL.createObjectURL(fileObj.files[0]);
			file_size = obj.files[0].size;
			size = file_size / 1024;
			if (size > 1024*5) {
				$('#file'+num).val("");
				layer.alert('上传图片不得大于5MB', {
					closeBtn: 0
				});
				return false;
			} else {
				var ldot = filepath.lastIndexOf(".");
				var types = filepath.substring(ldot + 1);
				if(types == 'jpg' || types == 'jpeg' || types == 'png'){
					$(obj).parents(".upload-img").prepend('<div class="img-info"><img src="'+value+'"/><div class="file-panel"><div class="del_cancel"><a class="btn table-btn" style="color: #ffffff;display: block;font-size: 18px;font-weight: bold;margin-left: 82px;height: 18px;line-height: 18px;text-decoration: none;" title="删除" href="javascript:;">×</a></div></div></div>');
				}else{
					layer.alert('文件格式不正确',{
						closeBtn: 0
					});
					return false;
				}
				$(obj).parent(".upload-btn").hide();
				$(obj).parents(".upload-img").children('p').hide();

				$('.img-info').hover(function(){	
					$(this).find(".file-panel").show();
				},function(){
					$(this).find(".file-panel").hide();

				});
				$(".del_cancel a").on("click",function(){
					$('#file'+num).val(""); 
					$(this).parents('.upload-img').find(".upload-btn").show();
					$(this).parents('.upload-img').find(".upload-img p").show();
					$(this).parents(".img-info").remove();

				});
			}
		}

        var order = decodeURI(window.location.href.split("#")[1]);
        $(".number").text(order);
	</script>

</html>